<template>
  <div>
    <h2>双向绑定</h2>

    <!-- 双向绑定指令的常用修饰符有：
      .number 自动将用户输入的值转为数值类型（输入数字有效）
      .trim 去除字符串首尾的空白字符
      .lazy 在 "change"时，而非"input"时更新（失去焦点时才更新数据） -->
      
    姓名：<input type="text" v-model.trim="form.uname" /><br />
    年龄：<input type="text" v-model.number="form.age" /><br />
    薪资：<input type="text" v-model.number.lazy="form.xinzi" /><br />
    <button @click="aa">提交表单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        uname: "",
        age: "",
        xinzi: "",
      },
    };
  },
  methods: {
    aa() {
      console.log("您提交的表单是", this.form);
    },
  },
};
</script>

<style>
</style>
